<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品分类</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
</head>
<body>

<div class="layui-fluid">
	<div class="layui-card">

		<div class="layui-card-body">
			<div style="padding-bottom: 10px;">
				<button class="layui-btn layui-btn-normal btn-top" data-type="add">添加分类</button>
			</div>

			<table id="LAY-table" lay-filter="LAY-table"></table>
			<script type="text/html" id="pic">
				{{#  if(d.deep > 1){ }}&emsp;{{#  } }}{{#  if(d.deep > 2){ }}&emsp;{{#  } }}
				<img src="{{d.pic}}" title="点击放大" lay-event="show">
				<div class="show_pic" id="pic{{d.id}}"><img src="{{d.pic}}"></div>
			</script>
			<script type="text/html" id="title">
				{{#  if(d.parent_id == 0){ }}
				<strong>{{d.title}}</strong>
				{{#  } else { }}
				{{#  if(d.deep > 1){ }}&emsp;{{#  } }}{{#  if(d.deep > 2){ }}&emsp;{{#  } }}└&ensp;{{d.title}}
				{{#  } }}
			</script>
			<script type="text/html" id="waptitle">
				{{#  if(d.parent_id == 0){ }}
				<strong>{{d.wap_title}}</strong>
				{{#  } else { }}
				{{#  if(d.deep > 1){ }}&emsp;{{#  } }}{{#  if(d.deep > 2){ }}&emsp;{{#  } }}└&ensp;{{d.wap_title}}
				{{#  } }}
			</script>
			<script type="text/html" id="px">
				{{#  if(d.parent_id != 0){ }}
				{{#  if(d.deep > 1){ }}&emsp;{{#  } }}{{#  if(d.deep > 2){ }}&emsp;{{#  } }}└&ensp;
				{{#  } }}
				{{d.sequence}}
			</script>
			<script type="text/html" id="show">
				{{#  if(d.is_show == 1){ }}
				<span class="layui-badge-dot layui-bg-blue"></span>显示
				{{#  } else { }}
				<span class="layui-badge-dot layui-bg-gray"></span>隐藏
				{{#  } }}
			</script>
			<script type="text/html" id="top">
				{{#  if(d.is_top == 1){ }}
				是
				{{#  } else { }}
				否
				{{#  } }}
			</script>
			<script type="text/html" id="tableBar">
				<a class="link-text" lay-event="edit">编辑</a>
				<div class="link-line"></div>
				<a class="link-text" lay-event="del">删除</a>
			</script>

		</div>
	</div>
</div>

<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
	layui.config({
		base: '{__STATIC__}/layuiAdmin/' // 静态资源所在路径
	}).use(['index', 'layer', 'table', 'form'], function(){
		let $ = layui.$;
		let layer = layui.layer;
		let table = layui.table;
		let form = layui.form;

		//初始化列表
		table.render({
			elem: '#LAY-table'
			,url: "{:url('getList')}"
			,cols: [[
				{type: 'checkbox', fixed: 'left'}
				,{field: 'id', width: 80, title: 'ID'}
				,{field: 'pic', width: 180, title: '图片', templet: '#pic'}
				,{field: 'title', minWidth:180, title: '名称', templet: '#title'}
				,{field: 'title', width:180, title: '手机名称', templet: '#waptitle'}
				,{field: 'sequence', width: 120, title: '排序', templet: '#px'}
				,{field: 'is_top', width: 120, title: '推荐', templet: '#top', align:'center'}
				,{field: 'is_show', width: 120, title: '状态', templet: '#show', align:'center'}
				,{title: '操作', width: 106, align:'center', fixed: 'right', toolbar: '#tableBar'}
			]]
			,page: true
			,limit: 100
			,height: 'full-100'
			,text: {none: '暂无相关数据'}
		});

		//监听搜索
		form.on('submit(LAY-search)', function(data){
			let field = data.field;
			//执行重载
			table.reload('LAY-table', {
				url: "{:url('getList')}"
				,where: field
				,page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});

		//表格内操作按钮
		table.on('tool(LAY-table)', function(obj){
			let data = obj.data;
			if(obj.event === 'del'){
				layer.confirm('真的删除行么', function(index){
					$.ajax({
						type:"post",
						url:"{:url('delete')}",
						data: {
							m_id:data.id
						},
						dataType:"json",
						beforeSend: function () {
							layer.load(1);
						},
						success:function(res){
							layer.closeAll();
							if(res.code == 0){
								if(res.msg == 'success') {
									obj.del();
									layer.msg('删除成功');
								} else {
									layer.msg(res.msg);
								}
							}
							else {
								layer.msg(res.msg);
							}
						}
					});

				});
			} else if(obj.event === 'edit'){
				layer.open({
					type: 2
					,title: '编辑分类'
					,content: "{:url('edit')}?id=" + data.id
					,maxmin: true
					,area: ['750px', '90%']
					,btn: ['确定', '取消']
					,yes: function(index, layero){
						let iframeWindow = window['layui-layer-iframe'+ index];
						let submitID = 'LAY-submit';
						let submit = layero.find('iframe').contents().find('#'+ submitID);

						//监听提交
						iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
							let field = data.field; //获取提交的字段
							let m_show = field.hasOwnProperty('m_show') ? field.m_show : 0;
							let m_top = field.hasOwnProperty('m_top') ? field.m_top : 0;

							//提交 Ajax 成功后，静态更新表格中的数据
							$.ajax({
								type:"post",
								url:"{:url('save')}",
								data: {
									m_title:field.m_title,
									m_wap_title:field.m_wap_title,
									m_parent_id:field.m_parent_id,
									m_pic:field.m_pic,
									m_keys:field.m_keys,
									m_des:field.m_des,
									m_info:field.m_info,
									m_px:field.m_px,
									m_top:m_top,
									m_show:m_show,
									m_id:field.m_id
								},
								dataType:"json",
								beforeSend: function () {
									layer.load(1);
								},
								success:function(res){
									layer.close(layer.index);
									if(res.code == 0){
										layer.closeAll();
										table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
									}
									else {
										layer.msg(res.msg);
									}
								}
							});

						});

						submit.trigger('click');
					}
				});
			} else if(obj.event === 'show'){
				layer.open({
					type: 1,
					shade: false,
					title: false,
					content: $('#pic' + data.id)
				});
			}
		});

		//头部操作按钮
		$('.btn-top').on('click', function(){
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		let active = {
			batchDel: function(){
				let checkStatus = table.checkStatus('LAY-table');
				let checkData = checkStatus.data //得到选中的数据
				let ids = "0";
				if(checkData.length === 0){
					return layer.msg('请选择数据');
				}
				$.each(checkData,function(key,value){
					ids = ids + "," + checkData[key]['id'];
				});
				layer.confirm('确定删除吗？', function(index) {
					$.ajax({
						type:"post",
						url:"{:url('delete')}",
						data: {
							m_id:ids
						},
						dataType:"json",
						beforeSend: function () {
							layer.load(1);
						},
						success:function(res){
							layer.closeAll();
							if(res.code == 0){
								let msg = res.msg == 'success' ? '删除成功' : res.msg;
								layer.msg(msg, {
									time: 2000
								}, function(){
									table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
								});
							}
							else {
								layer.msg(res.msg);
							}
						}
					});
				});
			}
			,add: function(){
				layer.open({
					type: 2
					,title: '添加分类'
					,content: "{:url('create')}"
					,maxmin: true
					,area: ['750px', '90%']
					,btn: ['确定', '取消']
					,yes: function(index, layero){
						let iframeWindow = window['layui-layer-iframe'+ index];
						let submitID = 'LAY-submit';
						let submit = layero.find('iframe').contents().find('#'+ submitID);

						//监听提交
						iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
							let field = data.field; //获取提交的字段
							let m_show = field.hasOwnProperty('m_show') ? field.m_show : 0;
							let m_top = field.hasOwnProperty('m_top') ? field.m_top : 0;

							//提交 Ajax 成功后，静态更新表格中的数据
							$.ajax({
								type:"post",
								url:"{:url('save')}",
								data: {
									m_title:field.m_title,
									m_wap_title:field.m_wap_title,
									m_parent_id:field.m_parent_id,
									m_pic:field.m_pic,
									m_keys:field.m_keys,
									m_des:field.m_des,
									m_info:field.m_info,
									m_px:field.m_px,
									m_top:m_top,
									m_show:m_show
								},
								dataType:"json",
								beforeSend: function () {
									layer.load(1);
								},
								success:function(res){
									layer.close(layer.index);
									if(res.code == 0){
										layer.closeAll();
										table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
									}
									else {
										layer.msg(res.msg);
									}
								}
							});
						});
						submit.trigger('click');
					}
				});
			}
		};

	});
</script>